<template>
  <!-- 该组件仅针对单一数据显示饼图，多数据可以参考percent_box组件 -->
  <div class="single_date_pie"
       ref="mychart">
  </div>
</template>

<script>

import echarts from 'echarts'
export default {
  name: 'singleDatePie',
  props: {
    pieDate: {
      type: Object,
      default () {
        return {
          pieSeriesDateValue: 0, // 系列数据
          pieSeriesDateName: '' // 系列数据名称
        }
      }
    }
  },
  data () {
    return {
      myChart: {},
      option: {
        color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E'], // 设置默认的调色盘，在未指定颜色时，顺序选择
        // 标题组件，包含主标题和副标题
        title: {
          show: false,
          text: '执行任务',
          x: 'center',
          textStyle: {
            fontSize: '15',
            color: 'green',
            fontWeight: 'bold'
          }
        },
        //  提示框组件
        tooltip: {
          // 是否显示提示框组件，包括提示框浮层和 axisPointe
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        //  图例
        legend: {
          selectedMode: false,
          orient: 'vertical',
          left: 'center',
          bottom: 2,
          itemWidth: 0, // 图例图形长
          itemHeight: 0, // 图例图形高
          data: [''],
          textStyle: {
            color: '#f2f3f3', // 图例文字颜色
            fontSize: '16'
          }
        },

        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            name: '任务进度',
            type: 'pie',
            center: [74, 74],
            // 饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: ['70%', '100%'],
            // 是否启用防止标签重叠策略，默认开启
            avoidLabelOverlap: false,
            // 取消鼠标悬浮动画
            hoverAnimation: false,
            silent: true, // 不响应鼠标事件
            // curson: 'default',
            // 初始动画时长
            animationDuration: 2000,
            // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                // 数据值
                value: 0,
                // 数据项名称
                name: '',
                // 该数据项是否被选中
                selected: false,
                // 单个扇区的标签配置
                label: {
                  normal: {
                    // 是显示标签
                    show: true,
                    position: 'center',
                    fontSize: 30,
                    // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                    formatter: '{d}%',
                    color: '#fff'
                  }
                },
                itemStyle: {
                  // 常态样式
                  normal: {
                    // 渐变色生成器：五个参数，前4个参数依次对应右/下/左/上四个方位，0 0 0 1则代表渐变色从正上方开始；第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#00b2ff' },
                      { offset: 1, color: '#f4ea94' }
                    ])
                  }
                }
              },
              {
                value: 100,
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  // 常态样式
                  normal: {
                    // 渐变色生成器：五个参数，前4个参数依次对应右/下/左/上四个方位，0 0 0 1则代表渐变色从正上方开始；第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了
                    color: '#2d2d2d'
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.option.legend.data[0] = this.pieDate.pieSeriesDateName
      this.option.series[0].data[0].name = this.pieDate.pieSeriesDateName
      this.option.series[0].data[0].value = this.pieDate.pieSeriesDateValue
      this.option.series[0].data[1].value = 100 - this.pieDate.pieSeriesDateValue
      this.setEchart()
    })
  },
  methods: {
    // 创建实例并生成表格
    setEchart () {
      this.myChart = echarts.init(this.$refs.mychart) // 创建实例
      this.myChart.setOption(this.option) // 生成图表
    }
  }
}
</script>

<style lang='scss' scoped>
.single_date_pie {
  display: inline-block;
  width: 148px;
  height: 198px;
}
</style>
